<!-- 高级 》 结构树 -->

<template>
  <div v-bind="superProps">
    <label v-if="label" v-bind="labelProps">{{ label }}</label>

    <el-cascader
      ref="tree"
      v-model="model"
      v-bind="commonProps"
      :popper-class="`CoreWeb-popup-tree ${popClass}`"
      :options="treeData"
      :props="props"
      :separator="and"
      :filterable="!noSearch"
      :show-all-levels="allName"
      @change="emitChange"
    >
      <template #default="{ data }">
        <div class="CoreWeb-option">
          <slot :item="data">
            <span>{{ data.label }}</span>
            <span v-if="hasCount && data.children" class="CoreWeb-option-count">({{ data.children.length }})</span>
            <span class="CoreWeb-option-right">
              <span v-if="hasRight">{{ CORE.dict(nodeDict, data.value, rightIndex - 1) }}</span>
            </span>
          </slot>
        </div>
      </template>
    </el-cascader>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixSuper from '../mixSuper'
import ParamTree from '../../param/ParamTree'

const name = 'SuperTree'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixSuper],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return ParamTree.data()
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: ParamTree.computed,

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: ParamTree.methods,
}
</script>
